<%@ page contentType="text/html;charset=utf-8" language="java"%>
<%@ taglib uri="/WEB-INF/struts-bean.tld" prefix="bean"%>
<%@ taglib uri="/WEB-INF/struts-logic.tld" prefix="logic" %>
<%@ taglib uri="/WEB-INF/struts-html.tld" prefix="html" %>
<html:html>
<head>
		<META http-equiv=Content-Type content="text/html; charset=utf-8">
		<LINK href="../styles/stylewang.css"  type=text/css rel=stylesheet>
		<style type="text/css"></style>
		<title>categorySet</title>
		<html:base/>
		<script language=javascript>
			function validatenew(){
				if(document.getElementById("modifyName")!=null){
					alert("Modify first");
					document.getElementById("newname").value="";
					document.getElementById("newename").value="";
					return false;
				}
				
				if(document.getElementById("newname").value=="" || document.getElementById("newename").value==""){
					alert("Name or EnglishName can not be null");
					return false;
				}
				
				var tds=document.getElementsByTagName("td");
				var names=new Array();
				var enames=new Array();
				var types=new Array();
				for(var i=0;i<tds.length;i++){
					if(tds[i].getAttribute("name")=="cateName"){
						names.push(tds[i]);
					}
					if(tds[i].getAttribute("name")=="cateEname"){
						enames.push(tds[i]);
					}
					if(tds[i].getAttribute("name")=="cateType"){
						types.push(tds[i]);
					}
				}
				
				var newname=document.getElementById("newname").value;
				var newename=document.getElementById("newename").value;
				var newtype=document.getElementById("newtype").value;
				for(var i=0;i<names.length;i++){
					if(names[i].firstChild.nodeValue==newname && types[i].firstChild.nodeValue==newtype){
						alert("Duplicated name!");
						return false;
					}
				}
				return true;
			}
			
			function validatemod(){
				if(document.getElementById("modifyName").value=="" || document.getElementById("modifyEname").value==""){
					alert("Name or EnglishName can not be null");
					return false;
				}
				
				var tds=document.getElementsByTagName("td");
				var names=new Array();
				var enames=new Array();
				var types=new Array();
				for(var i=0;i<tds.length;i++){
					if(tds[i].getAttribute("name")=="cateName"){
						names.push(tds[i]);
					}
					if(tds[i].getAttribute("name")=="cateEname"){
						enames.push(tds[i]);
					}
					if(tds[i].getAttribute("name")=="cateType"){
						types.push(tds[i]);
					}
				}
				
				var newname=document.getElementById("modifyName").value;
				var newename=document.getElementById("modifyEname").value;
				var newtype=document.getElementById("modifyType").value;
				
				for(var i=0;i<names.length;i++){
					if(names[i].firstChild.nodeValue==newname && types[i].firstChild.nodeValue==newtype){
						alert("Duplicated name!");
						return false;
					}
				}
				return true;
				}
				
 			function submit1(vl){
	//			var form=document.getElementById(vl);
				alert(vl.getAttribute("id"));
				vl.submit();
			 }
			 
			function modify(id){
				var messhot=document.getElementById("messhot").value;
				var meselement=document.getElementById("meselement").value;
				var cell=document.getElementById(id);
				var value=cell.firstChild.nodeValue;
				if(navigator.appName=="Microsoft Internet Explorer"){
					cell.nextSibling.nextSibling.nextSibling.innerHTML="&nbsp;<input type='button' value='Modify' onclick='javascript:if(validatemod("+value+")){submit();}'><a href='index.do'>Cancel</a>";
					cell.nextSibling.nextSibling.innerHTML="<select id='modifyType' name='categoryType'><option value='Element'>"+meselement+"</option><option value='Shot'>"+messhot+"</option></select>";
					cell.nextSibling.innerHTML="<input id='modifyEname' type='text' name='categoryEname' value="+cell.nextSibling.firstChild.nodeValue+">";
					cell.innerHTML="<input id='modifyName' type='text' name='categoryName' value="+value+">";
				}else{
					var a=cell.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling;
					a.innerHTML="<input type='button' value='Modify' onclick='javascript:if(validatemod("+value+")){submit1("+value+");}'><a href='index.do'>Cancel</a>";
					cell.nextSibling.nextSibling.nextSibling.nextSibling.innerHTML="<select id='modifyType' name='categoryType'><option value='Element'>"+meselement+"</option><option value='Shot'>"+messhot+"</option></select>";
					cell.nextSibling.nextSibling.innerHTML="<input id='modifyEname' type='text' name='categoryEname' value="+cell.nextSibling.nextSibling.firstChild.nodeValue+">";
					cell.innerHTML="<input id='modifyName' type='text' name='categoryName' value="+value+">";
				}
				
			}
		</script>
</head>
  
  <body>
	<input type="hidden" id="messhot" value="<bean:message key='shot'/>">
	<input type="hidden" id="meselement" value="<bean:message key='element'/>">
    <table border="0" width="100%" cellspacing="0" id="table1">
		<tr>
			<td width="15%" id="leftcenter"><b>&nbsp;<bean:message key="categoryname"/></b></td>
			<td width="15%"id="leftcenter" ><b>&nbsp;<bean:message key="categoryenglishname"/></b></td>
			<td width="15%" id="leftcenter"><b>&nbsp;<bean:message key="categorytype"/></b></td>
			<td width="15%" id="leftcenter">&nbsp; </td>
		</tr>
		<logic:iterate id="element" name="categories">
		<form action="intoMod.do" method="POST" id="<bean:write name='element' property='categoryName'/>">
		<tr>
			<td id="<bean:write name="element" property="categoryId"/>" name="cateName" width="15%" class="leftcenter"><bean:write name="element" property="categoryName"/></td>
			<td name="cateEname" width="15%" id="leftcenter"><bean:write name="element" property="categoryEnglishName"/></td>
			<td name="cateType" width="26%"id="leftcenter" ><logic:equal name="element" property="categoryType" value="Element"><bean:message key="element"/></logic:equal><logic:equal name="element" property="categoryType" value="Shot"><bean:message key="shot"/></logic:equal></td>
			<td width="29%" id="leftcenter"><a style="cursor:hand" onClick="modify(<bean:write name="element" property="categoryId"/>)"><u>[<bean:message key="cate.modify"/>]&nbsp;&nbsp;</u></a>
			<html:link page="/delmod.do" paramId="categoryId" paramName="element" paramProperty="categoryId" onclick="return confirm('')">[<bean:message key="cate.delete"/>]</html:link></td>
		</tr>
		<input type="hidden" name="categoryId" value="<bean:write name='element' property='categoryId'/>">
		</form>
		</logic:iterate>
		<form action="createMod.do" method="POST" >
		<tr>
			<td width="15%" id="leftcenter">&nbsp;<input id="newname" type="text" name="categoryname" ></td>
			<td width="15%" id="leftcenter">&nbsp;<input id="newename" type="text" name="categoryename" ></td>
			<td width="15%" id="leftcenter">&nbsp;<select id="newtype" name="categorytype" ><option value="Shot"><bean:message key="shot"/></option><option value="Element"><bean:message key="element"/></option></select></td>
			<td width="15%" id="leftcenter">&nbsp;<input type="button" value="New" onClick="javascript:if(validatenew()){submit();}">
			  <%if(request.getAttribute("catedup")!=null){ %><span STYLE="color:red"><%=request.getAttribute("catedup") %></span><%} %>
				<%if(request.getAttribute("catenull")!=null){ %><span STYLE="color:red"><%=request.getAttribute("catenull") %></span><%} %>
			</td>
		</tr>
		</form>
    </table>
  </body>
</html:html>
